import React from 'react';
import { Row, Col, Card, Statistic } from 'antd';

/**
 * 通用统计卡片组件
 * @param {Object} props - 组件属性
 * @param {Array} props.items - 统计项数组
 * @param {Object} props.layout - 布局配置
 * @param {string} props.style - 样式配置
 * @returns {JSX.Element} 统计卡片组件
 */
const StatisticCards = ({
  items = [],
  layout = { gutter: 16, span: 6 },
  style = { marginBottom: 24 },
}) => {
  if (!items || items.length === 0) {
    return null;
  }

  return (
    <Row gutter={layout.gutter} style={style}>
      {items.map((item, index) => (
        <Col key={item.key || index} span={item.span || layout.span}>
          <Card>
            <Statistic
              title={item.title}
              value={item.value || 0}
              suffix={item.suffix}
              prefix={item.prefix}
              precision={item.precision}
              valueStyle={item.valueStyle}
              {...item.statisticProps}
            />
          </Card>
        </Col>
      ))}
    </Row>
  );
};

export default StatisticCards; 